<template>
    <swiper id="swiper" :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(sowing,index) in newList" :key="index">
            <img :src="sowing.imgUrl" :alt="sowing.public_name">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import {actionWithLink,addImagePrefix} from "@/utils/utils"
    let vm = null;


    export default {
        name: "Sowing",
        props:{
            sowing_list:Array
        },
        data(){
            return {
                swiperOption: {
                    notNextTick: true,
                    // 分页
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    // 循环
                    loop: true,
                    // 切换时长
                    autoplay: {
                        delay: 3000
                    },
                    // 速度
                    speed: 600,
                    // 滑动后回调函数
                    on: {
                        slideChangeTransitionEnd() {
                            // console.log(this.activeIndex);
                        },
                        click() {
                            // console.log(this.realIndex);
                            var item = vm.sowing_list[this.realIndex];
                            actionWithLink(item.link);
                            // console.log(this.sowing_list);
                        }
                    }
                }
            }
        },
        computed:{
            swiper(){
                return this.$refs.mySwiper.swiper;
            },
            newList(){
                for (var i = 0 ; i < this.sowing_list.length ; i++) {
                  var item =  this.sowing_list[i];
                    item.imgUrl = addImagePrefix(item.imgUrl);
                }

                return this.sowing_list;
            }
        },
        mounted(){

        },
        components:{
            swiper,
            swiperSlide
        },
        created() {
            vm = this;
        }

    }
</script>

<style scoped>
#swiper{
    /*width: 41.88rem;*/
    /*height: 22.5rem;*/
    margin-top: 1.3333333333333333rem;
    margin-left: 1.3333333333333333rem;
    margin-right: 1.3333333333333333rem;

    height: 11.25rem;
    background-color: transparent;

    border-radius:0.32rem;

}

#swiper img{
    /*width: 670px;*/
    /*height: 360px;*/
    width: 100%;
    height: 100%;
}
#swiper >>> .swiper-pagination-bullet{

    border-radius: 0px;

    width:0.64rem;
    height:0.16rem;
    background:rgba(57,123,230,1);

}
#swiper >>> .swiper-pagination-bullet-active{
    background-color: #397BE6 ;
}

</style>